<template>
	<view class="u-p-28">
		<u-collapse ref="collapse" :item-style="itemStyle">
			<u-collapse-item @change="change" :title="item.title" v-for="(item, index) in itemList" :key="index">
				<view class="u-p-b-20">
					<u-parse :html="item.content"></u-parse>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	import {
		getHelpers
	} from '@/api/user';
	export default {
		data() {
			return {
				itemStyle: {
					marginTop: '20rpx',
					background: '#fff',
					paddingLeft: '20rpx',
					borderRadius: '4px',
					fontSize: '14px',
					color: '#333'
				},
				itemList: [],
			};
		},
		mounted() {
			this.getHelpers();
		},
		methods: {
			change() {
				this.$refs.collapse.init();
			},
			async getHelpers() {
				const res = await getHelpers();
				const data = res.data;
				this.$nextTick(() => {
					this.itemList = data.map(item => {
						item.content = item.content.replace(/<img/g,
							'<img style="max-width:100%;height:auto;display:block;"');
						return item;
					})
					this.$refs.collapse.init();
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
